import React, { useEffect, useState } from 'react';
import './Returncar.scss'
import { DownOutlined, SearchOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button,  Cascader, Space, Input, Tag, Table, Drawer, Checkbox, Form,DatePicker } from 'antd';
import * as service from '../../../../api/index'
import * as zzservice from '../../../../api/indexzz'
import { useNavigate } from "react-router-dom"
import { async } from 'q';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';


interface Props {

}
function Returncar(props: Props) {
  const [carrecords, setCarrecords] = useState([])
  const [carxx, setCarxx] = useState([])
  const [carxq, setCarxq] = useState<any>({})
  var [form] = Form.useForm()
  let navigate = useNavigate()


  const { RangePicker } = DatePicker;

  
  const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    } else {
      console.log('Clear');
    }
  };
  
  const rangePresets: {
    label: string;
    value: [Dayjs, Dayjs];
  }[] = [
    { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },
    { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },
    { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },
    { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },
  ];



  const options = [
   { value: '请选择',
    label: '请选择',

  },
  {
    value: '商务专车',
    label: '商务专车',
  },
  {
      value: '研发部专车',
      label: '研发部专车',
    },
    {
      value: '设计部专车',
      label: '设计部专车',
    },
    {
      value: '行政部专车',
      label: '行政部专车',
    },
  ];

  // 车辆查询
const onChange = async (value: any) => {
  value = value.join()
  // var res = await service.car_recordcar()
  // var t = res.data.filter((item: any, index: any) => {
  //   return item.car == value
  // })
  // setCarrecords(t)
};
// 模糊查询
var cha = async (e: any) => {
  // var res = await service.car_searchrecordcar({ sponsor_like: e.target.value })
  // setCarrecords(res.data)
}
  

  var fa = async () => {
    // var res = await service.car_recordcar()
    var res = await zzservice.car_huancar()
    setCarrecords(res.data.data)
  }
  useEffect(() => {
    fa()
  }, [])


  const columns: any = [
    {
      title: '关联审批编号',
      dataIndex: 'ref',
      key: 'ref',
      align: 'center',
      width: 40
    },
    {
      title: '申请车辆',
      dataIndex: 'car',
      key: 'car',
      align: 'center',
      width: 120
    },
    {
      title: '用车部门',
      dataIndex: 'branch',
      key: 'branch',
      align: 'center',
      width: 170
    },
    {
      title: '用车人',
      dataIndex: 'sponsor',
      key: 'sponsor', 
      align: 'center',
      width: 80
    },
    {
      title: '提交人',
      dataIndex: 'submitter',
      key: 'submitter',
      align: 'center',
      width: 100
      },
    {
      title: '提交时间',
      dataIndex: 'Submissiontime',
      key: 'Submissiontime',
      align: 'center',
      width: 160
    },
    
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_: any, record: any) => (
        <Space size="middle">
          <a onClick={() => { showDrawer(record) }}>查看详情</a>
          <a onClick={() => { dele(record.id) }}>删除</a>
        </Space>
      ),
    },
  ];
 // 还车单删除
 var dele = async (id: any) => {
  // var res = await service.new_deleterecordcar({ id })
  var res = await zzservice.car_delHcar({ id })
  // var res1 = await service.car_recordcar()
  var res1 = await zzservice.car_huancar()
  setCarrecords(res1.data.data)
}

  const [open, setOpen] = useState(false);

  const showDrawer = (record: any) => {
    setCarxq(record)
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };



  return (
    <div className='returncar'>
      <div className="hai">
        <div className="h"></div>
        <div className="h1">还车记录</div>
      </div>
      <div className="h2">
        <div className="a1">
          <span style={{ color: '#858383',marginRight:10 }}>车辆</span>
          <Cascader options={options}  placeholder="请选择" className='xuan' onChange={onChange}/>
          <span style={{ color: '#858383',marginRight:10,marginLeft:10 }}>提交日期</span>
          <RangePicker presets={rangePresets} onChange={onRangeChange} />
          <Input placeholder="请输入关键字" suffix={<SearchOutlined />} style={{ width: 200,margin:10 }}  onPressEnter={(e) => { cha(e) }}/>
        </div>
        <div className="a2">
          <Button type="primary" icon={<PlusOutlined />} onClick={()=>{navigate('/index/Vehicle/addReturncar')}}>新增还车登记</Button>
          <Button type="primary" ghost style={{ marginLeft: 10 }} >导出</Button>
        </div>

      </div>
      <div className="h3">
          <Table columns={columns} dataSource={carrecords} />
      </div>
      <Drawer title="车辆详情" placement="right" onClose={onClose} open={open}>
       
      <Tag color="magenta">审批编号：{carxq.approval}</Tag>
        <Tag color="magenta">审批标题：{carxq.title}</Tag>
        <Tag color="magenta">发出时间：{carxq.launchtime}</Tag>
        <Tag color="magenta">申请人：{carxq.sponsor}</Tag>
        <Tag color="magenta">申请部门：{carxq.branch}</Tag>

      </Drawer>
    </div>
  );
}

export default Returncar;